<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
             :dataSource="pageData" @change="onTableChange">
      <template slot="interviewTime" slot-scope="text, record">
        <span v-if="record.interviewStartTime == null">--</span>
        <span v-else>{{ record.interviewStartTime }} ~ {{ record.interviewEndTime }}</span>
      </template>
      <template slot="interviewAppointmentTime" slot-scope="text, record">
        <span v-if="record.interviewAppointmentStartTime == null">--</span>
        <span v-else>{{ record.interviewAppointmentStartTime }} ~ {{ record.interviewAppointmentEndTime }}</span>
      </template>
      <template slot="interviewNum" slot-scope="text">
        <span>第{{ text }}次</span>
      </template>
      <template slot="interviewClassification" slot-scope="text">
        <span v-if="text == null">--</span>
        <span v-else>{{ text }}</span>
      </template>
      <template slot="interviewActualTime" slot-scope="text">
        <span v-if="text == null">--</span>
        <span v-else>{{ text }}</span>
      </template>

      <template slot="noticeStatus" slot-scope="text">
        <span v-if="text == '1'">已通知</span>
        <span v-if="text == '2'">待通知</span>
      </template>
      <template slot="status" slot-scope="text,record">
        <span v-if="text == '1'" style="color:#27BF44">待预约</span>
        <span v-if="text == '2'" style="color:#108EE9">待录入</span>
        <span v-if="text == '3'" style="color:#FAAD14">补录申请中</span>
        <span v-if="text == '4'" style="color:#FAAD14">取消申请中</span>
        <span v-if="text == '5'" style="color:#D9001B">已逾期 <a-tag color="red" style="margin-left:5px;"
                                                                  v-if="record.overdueResponsibilityName">
            {{ record.overdueResponsibilityName }}
          </a-tag></span>
        <span v-if="text == '6'">已完成</span>
        <span v-if="text == '7'">已取消</span>
        <span v-if="text == '8'" style="color:#999">待开始</span>
        <span v-if="text == '9'">免除</span>
      </template>
      <!--操作-->
    </z-table>


  </a-card>
</template>

<script>
import * as interviewApi from '@/api/sjsk/help/interview.js'
import * as uroscopyApi from '@/api/sjsk/check/uroscopy.js'
export default {
  components: {

  },

  data() {
    return {
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '访谈次数',
          dataIndex: 'interviewNum',
          align: 'center',
          scopedSlots: { customRender: 'interviewNum' },
        },
        {
          title: '访谈分类',
          dataIndex: 'interviewClassification',
          align: 'center',
          scopedSlots: { customRender: 'interviewClassification' },
        },
        {
          title: '计划时间',
          dataIndex: 'interviewTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewTime' },
        },
        {
          title: '预约时间',
          dataIndex: 'interviewAppointmentTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewAppointmentTime' }
        },
        {
          title: '通知状态',
          dataIndex: 'noticeStatus',
          align: 'center',
          scopedSlots: { customRender: 'noticeStatus' },
        },
        {
          title: '录入状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '谈话时间',
          width: 120,
          dataIndex: 'interviewActualTime',
          align: 'center',
          scopedSlots: { customRender: 'interviewActualTime' },
        },
        // {
        //   title: '操作',
        //   width: 250,
        //   align: 'center',
        //   dataIndex: 'action',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      sjskPersonId: this.$store.state.holographicArchives.routeObjData.sjskId,
      pageData: {},
    }
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      let params = Object.assign(this.pageFilter, { sjskPersonId: this.sjskPersonId, interviewType: 1 }) //定死为定期访谈
      interviewApi.sjskInterviewData(params).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
  },
}
</script>
<style lang="less" scoped>
.s1 {
  color: #1890FF;
}
</style>
